<template>
  <el-form
    ref="userForm"
    :model="userInfo"
    label-width="120px"
    style="margin-left: 120px; margin-top: 30px"
  >
    <el-form-item label="姓名:">
      <el-input v-model="userInfo.username" style="width: 300px" />
    </el-form-item>
    <el-form-item label="密码:">
      <el-input
        v-model="userInfo.password"
        type="password"
        style="width: 300px"
        disabled
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="hSubmit">更新</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
// 导入获取用户信息接口
import { getStaffPhoto, saveUserDetailById } from '@/api/user'
export default {
  // 1.数据
  data () {
    return {
      userInfo: {
        username: '',
        password: ''
      }
    }
  },
  // 2.页面立即渲染
  created () {
    this.loadStaffPhoto()
  },
  //3.事件
  methods: {
    // (1)获取用户信息
    async loadStaffPhoto () {
      try {
        const res = await getStaffPhoto(this.$route.params.id)
        // 保存用户信息
        this.userInfo = res.data
      } catch (err) {
        console.log('getProfile', err)
      }
    },
    // (2)更新用户信息
    async hSubmit () {
      // 兜底校验
      // 提示成功信息
      this.$message({
        message: '恭喜你，修改一条信息',
        type: 'success'
      })
      // 发送请求
      try {
        await saveUserDetailById(this.userInfo)
        // 保存数据
      } catch (err) {
        console.log('saveUserDetailById', err)
      }
      // 返回到上一页
      this.$router.back()
    },
  }
}
</script>